<template>
  <div class="address-box">
    <nav-bar>
      <template v-slot:left>&lt;</template>
      <template v-slot:default>地址列表</template>
    </nav-bar>
    <div v-show="state.list.length == 0" class="address-message">
      还没有地址信息，请添加地址
    </div>
    <div class="address-item">
      <van-address-list
        v-model="state.chosenAddressId"
        :list="state.list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
      />
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import { useRoute, useRouter } from "vue-router";
import { ref, reactive, onMounted } from "vue";
import { getAddressList } from "network/address";
import { Button, Toast } from "vant";
export default {
  name: "AddressList",
  components: {
    NavBar,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();

    const state = reactive({
      list: [],
      chosenAddressId: "1",
    });

    onMounted(() => {
      Toast.loading({
        message: "地址数据加载中...",
        forbidClick: true,
      });
      getAddressList().then((res) => {
        console.log(res);
        if (res.data.length == 0) {
          state.list = [];
          return;
        }
        state.list = res.data.map((item) => {
          return {
            id: item.id,
            name: item.name,
            tel: item.phone,
            address: `${item.province} ${item.city} ${item.county} ${item.address}`,
            isDefault: !!item.is_default,
          };
        });
      });

      Toast.clear();
    });

    const onAdd = () => {
      router.push({ path: "/addressedit", query: { type: "add" } });
    };
    const onEdit = (item) => {
      router.push({
        path: "/addressedit",
        query: { type: "edit", addressId: item.id },
      });
    };
    return {
      state,
      onAdd,
      onEdit,
    };
  },
};
</script>

<style scoped lang="scss">
.address-box {
  height: 300px;
  .address-message {
    margin-top: 50px;
  }
  .van-radio__icon {
    display: none;
  }
  .address-item {
    margin-top: 45px;
    .van-button {
      background-color: var(--color-tint);
      border-color: var(--color-tint);
    }
  }
  .van-address-list__bottom {
    bottom: 100px imp !important;
  }
  .van-address-list__add {
    height: 50px imp !important;
  }
}
</style>
